import Item from "antd/es/list/Item";
import { useEffect, useState } from "react"
import "./lunbo.css"

function Lunbo() {
    let [list] = useState([
        require('../../assets/img/l1.jpg'),
        require('../../assets/img/l2.jpg'),
        require('../../assets/img/l3.jpg'),
        require('../../assets/img/l4.jpg'),
        require('../../assets/img/l5.jpg')
    ]);
    let [num, setNum] = useState(0);
    let map = list.map((item, i) =>
        <img src={item} key={i} style={{ display: num == i ? 'block' : 'none' }}/>
    )
    // 页面加载完成设定定时器,下面的方法只有类组件才能使用
    // componentDidMount(){
    //     setInterval(() => {
    //         if (num == list.length - 1) {
    //             setNum(0);
    //         } else {
    //             setNum(num++);
    //         }
    //     }, 2000);
    // }
    // 这里需要页面加载完成执行定时器
    // 需要用到hook里面的
    useEffect(() => {
        let timer = setInterval(() => {
            if (num == list.length - 1) {
                setNum(0);
            } else {
                setNum(num++);
            }
        }, 2000)
        return () => clearInterval(timer);
    })
    return (
        <div className="lunbo-parent">
            <div className="lunbo">
                {map}
            </div>
            <div className="yuandian">
                {
                    list.map((item, i) => <li key={i} className={i == num ? 'dian' : ''}></li>)
                }
            </div>
        </div>
    )
}
export default Lunbo